export var TableType;
(function (TableType) {
    TableType[TableType["input"] = 0] = "input";
    TableType[TableType["choose"] = 1] = "choose";
    TableType[TableType["time"] = 2] = "time";
    TableType[TableType["table"] = 3] = "table";
    TableType[TableType["upTable"] = 4] = "upTable";
})(TableType || (TableType = {}));
export var imgType;
(function (imgType) {
    imgType[imgType["none"] = -1] = "none";
    imgType[imgType["pic"] = 0] = "pic";
    imgType[imgType["mp4"] = 1] = "mp4";
})(imgType || (imgType = {}));
export class ValueLength {
    constructor(val = "", width = -1) {
        this.val = val;
        this.width = width;
    }
    toString() {
        return "ValueLength";
    }
}
export class KeyValue {
    constructor(key, value = "", chooVal = []) {
        this.vals = [];
        this.chooVal = [];
        this.isCirculation = true;
        this.allKeys = [];
        this.key = key;
        if (typeof (value) == "string") {
            this.vals = [value];
        }
        else {
            if (value.toString() == "ValueLength") {
                let _temp = value;
                this.vals = [_temp];
            }
            else {
                this.vals = value;
            }
        }
        this.allKeys = [...[key], ...this.vals];
        this.chooVal = chooVal;
    }
    toString() {
        return "KeyValue";
    }
}
export class SettingTable {
    constructor(keys = [], type = TableType.input) {
        this.keys = [];
        this.disable = true;
        this.keys = keys;
        this.type = type;
    }
    toString() {
        return "SettingTable";
    }
}
export class LineTable {
    constructor(subArray) {
        this.subArray = [];
        this.subArray = subArray;
    }
}
export class WorkSetting {
    constructor(title, context) {
        this.context = [];
        this.title = title;
        if (context == undefined) {
            throw new Error("context is empty");
        }
        this.context = context;
    }
}
export class WorkModel {
    constructor(name = "", workSeting) {
        this.pics = ["jpeg", "png", "jpg", "gif"];
        this.mp4s = ["mp4", "avi"];
        let element = this.bindEle(name);
        if (element) {
            this.elment = element;
            this.workSeting = workSeting;
            this.joinSetting();
        }
    }
    bindEle(_ele) {
        let ele = document.querySelector(_ele);
        if (ele) {
            return ele;
        }
        else {
            console.log("fail,not find ele");
            return false;
        }
    }
    allotLength() {
    }
    inputVal(val) {
        let __value = document.createElement("div");
        __value.className = "val";
        val.vals.filter((_val) => {
            let p = this.judgePic(_val);
            if (p.width > 0) {
                __value.style.width = p.width + "px";
            }
            __value.appendChild(p.ele);
        });
        return __value;
    }
    inputKey(val) {
        let __title = document.createElement("div");
        __title.className = "key";
        let p = document.createElement("p");
        if (typeof (val.key) == "string") {
            p.innerText = val.key;
        }
        else {
            let len = val.key.width;
            p.innerText = val.key.val;
            if (len > 0) {
                __title.style.width = len + "px";
            }
        }
        __title.appendChild(p);
        return __title;
    }
    chooseVal(val) {
        let __valueEle = document.createElement("div");
        __valueEle.className = "choose";
        val.vals.filter((item, i) => {
            let _v1Box = document.createElement("div");
            _v1Box.className = "chooseBox";
            let _v1 = document.createElement("span");
            let _choose = document.createElement("p");
            _choose.className = "chooseClick";
            if (val.chooVal[i]) {
                _choose.style.background = "#000";
            }
            _v1.style.paddingRight = "4px";
            if (typeof item == "string") {
                _v1.innerText = item;
            }
            else if (item.toString() == "ValueLength ") {
                let len = item.width;
                _v1.innerText = item.val;
                _v1Box.style.width = len + 'px';
            }
            _v1Box.append(_v1);
            _v1Box.append(_choose);
            __valueEle.append(_v1Box);
        });
        return __valueEle;
    }
    judgePic(suffixs) {
        let eleWidth = {
            width: -1,
            ele: document.createElement("p")
        };
        let _temp = "";
        if (typeof suffixs == "string") {
            _temp = suffixs;
        }
        else {
            _temp = suffixs.val;
            eleWidth.width = suffixs.width;
        }
        eleWidth.ele.innerText = _temp;
        let spilt = _temp.split(".");
        if (spilt.length > 1) {
            let compare = spilt[spilt.length - 1];
            compare = compare.replace(/\s/g, "").replace(/[^a-zA-Z0-9]/g, "");
            for (let index = 0; index < this.pics.length; index++) {
                const element = this.pics[index];
                console.log(compare.toLowerCase(), element, compare);
                if (element.indexOf(compare.toLowerCase()) > -1) {
                    eleWidth.ele = document.createElement("img");
                    eleWidth.ele.src = _temp;
                    break;
                }
            }
            for (let index = 0; index < this.mp4s.length; index++) {
                const element = this.mp4s[index];
                if (element.indexOf(compare.toLowerCase()) > -1) {
                    eleWidth.ele = document.createElement("video");
                    eleWidth.ele.src = _temp;
                    eleWidth.ele.autoplay = true;
                    eleWidth.ele.controls = true;
                    break;
                }
            }
        }
        return eleWidth;
    }
    baseInput(val) {
        let f = {
            success: true,
            ele: document.createElement("p")
        };
        if (typeof (val) == "string") {
            if (val == "") {
                f.success = false;
            }
            f.ele.innerText = val;
        }
        else {
            let len = val.width;
            if (val.val == "") {
                f.success = false;
            }
            f.ele.innerText = val.val;
            if (len > 0) {
                f.ele.style.width = len + "px";
            }
        }
        return f;
    }
    // recursion
    analysisKeyValue(k, type) {
        let eles = [];
        let isAdd = false;
        let rootEle = document.createElement("div");
        rootEle.className = "upTableBox";
        k.allKeys.filter(_k => {
            if (_k.toString() == "SettingTable") {
                let divEle = document.createElement("div");
                divEle.className = "tableTitle";
                let _eles = this.resolutionTale(_k, 1);
                _eles.filter(item => {
                    divEle.appendChild(item);
                });
                eles.push(divEle);
            }
            else if (_k.toString() == "KeyValue") {
                let _eles = this.analysisKeyValue(_k, type);
                _eles.filter(item => {
                    eles.push(item);
                });
            }
            else {
                let p = this.baseInput(_k);
                if (p.success) {
                    let divEle = document.createElement("div");
                    if (type == TableType.table) {
                        divEle.className = "tableBox";
                    }
                    else if (type == TableType.upTable) {
                        divEle.className = "upTable";
                        if (!isAdd) {
                            isAdd = true;
                            divEle.appendChild(p.ele);
                            divEle.appendChild(rootEle);
                            eles.push(divEle);
                        }
                        else {
                            rootEle.appendChild(p.ele);
                        }
                    }
                    if (!isAdd) {
                        divEle.appendChild(p.ele);
                        eles.push(divEle);
                    }
                }
            }
        });
        return eles;
    }
    resolutionTale(val, recursionCount = 0) {
        let list = [];
        let rootBox = document.createElement('div');
        val.keys.filter(k => {
            let _ele = this.analysisKeyValue(k, val.type);
            _ele.filter(_eleee => {
                if (recursionCount == 0 && _eleee.className == "tableTitle") {
                    rootBox.appendChild(_eleee);
                    list.push(rootBox);
                }
                else {
                    list.push(_eleee);
                }
            });
        });
        return list;
    }
    table(val, outSide, line, tableWidth) {
        // T transfrom the list
        let list = [];
        val.keys.filter((__v) => {
            if (list.length == 0) {
                list.push([__v.key]);
                __v.vals.filter(____v => {
                    list.push([____v]);
                });
            }
            else {
                list[0].push(__v.key);
                __v.vals.filter((____v, _j) => {
                    list[_j + 1].push(____v);
                });
            }
            __v.isCirculation = false;
        });
        let _unUse = tableWidth;
        let _saveEle = [];
        list.forEach((_val, i) => {
            let __title = document.createElement("div");
            __title.className = "tableTitle";
            // get _width
            let _width = -1;
            _val.filter(item => {
                if (typeof item != "string") {
                    _width = item.width;
                }
            });
            if (_width > -1) {
                __title.style.width = _width + "px";
                _unUse -= _width;
                _unUse -= 1; // pading
            }
            else {
                __title.style.width = (_unUse / (list.length - i)).toFixed(0) + "px";
                _unUse -= (_unUse / (list.length - i)) - 1;
            }
            if (_saveEle.length == 0) {
                _val.forEach((_some) => {
                    _saveEle.push([]);
                });
            }
            _val.forEach((_some, i) => {
                let p = this.judgePic(_some);
                __title.append(p.ele);
                _saveEle[i].push(p.ele);
            });
            line.append(__title);
        });
        outSide.appendChild(line);
        _saveEle.forEach(_ls => {
            let max_height = 0;
            _ls.filter(pEle => {
                if (pEle.offsetHeight > max_height) {
                    max_height = pEle.offsetHeight;
                }
            });
            _ls.filter(pEle => {
                if (pEle.offsetHeight < max_height) {
                    if (pEle.innerText.length < 40) {
                        pEle.style.lineHeight = max_height - 9 + "px";
                    }
                }
                pEle.style.height = max_height - 9 + "px";
            });
        });
        outSide.removeChild(line);
    }
    joinSetting() {
        var _a, _b, _c;
        // this.elment.add
        let _titleEle = document.createElement("div");
        _titleEle.className = "title";
        _titleEle.innerHTML = this.workSeting.title;
        (_a = this.elment) === null || _a === void 0 ? void 0 : _a.appendChild(_titleEle);
        let _outSide = document.createElement("div");
        _outSide.className = "outTable";
        (_b = this.elment) === null || _b === void 0 ? void 0 : _b.appendChild(_outSide);
        let tableWidth = _outSide.offsetWidth - (_outSide.offsetWidth % 2);
        (_c = this.workSeting) === null || _c === void 0 ? void 0 : _c.context.forEach(value => {
            let line = document.createElement("div");
            line.className = "line";
            let line_eles = [];
            let useLength = 0;
            value.subArray.filter((_val) => {
                _val.keys.filter((__val, __index) => {
                    if (_val.type != TableType.table) {
                        let __title = this.inputKey(__val);
                        if (__title.style.width == "") {
                            __title.style.width = ((tableWidth / 5)).toFixed(0) + "px";
                            useLength += ((tableWidth / 5) + 1);
                        }
                        else {
                            let _len = parseInt(__title.style.width);
                            useLength += _len;
                        }
                        line.append(__title);
                    }
                    if (_val.type == TableType.input) {
                        let __value = this.inputVal(__val);
                        if (__value.style.width == "") {
                            line_eles.push(__value);
                        }
                        line.append(__value);
                    }
                    else if (_val.type == TableType.choose) {
                        let __valueEle = this.chooseVal(__val);
                        line.append(__valueEle);
                        line_eles.push(__valueEle);
                    }
                    else if (_val.type == TableType.table) {
                        if (__val.isCirculation == false) {
                            return false;
                        }
                        // this.table(_val, _outSide, line, tableWidth)
                        let __valueEle = this.resolutionTale(_val);
                        __valueEle.filter(ele => {
                            line.append(ele);
                        });
                        // line_eles.push(__valueEle)
                    }
                });
            });
            let unUse = tableWidth - useLength - (line_eles.length * 1);
            if (line_eles.length > 0) {
                let single = parseInt((unUse / line_eles.length).toString());
                line_eles.filter(_ele => {
                    _ele.style.width = single.toString() + "px";
                });
            }
            _outSide.appendChild(line);
        });
    }
}
